import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
import Fonts from '../../../ch/foundations/Fonts.vue';

<Meta
  title="Foundations/Fonts/Sizes and styles"
  component={Fonts}
  argTypes={{
    textStyle: { name:'style and weight', control: { type: 'select', options: ['regular', 'italic', 'bold', 'bold-italic'] } },
    size: { control: { type: 'select', options: ['3xl', '2xl', 'xl', 'lg', 'base', 'sm', 'xs'] } },
  }}
/>

export const Template = (args, { argTypes }) => ({
  props: Object.keys(argTypes),
  components: { Fonts },
  template: '<Fonts :label="label" :textStyle="textStyle" :size="size" />',
});

# Fonts

## Headings
For heading, the following css classes are built. These classes combine a text size and a font weight, useful for most of the titles
- `.h1` for heading 1
- `.h2` for heading 2
- `.h3` for heading 3
- `.h4` for heading 4
- `.h5` for heading 5

<Canvas>
  <div>
    <div class="h1">Title heading 1</div>
    <div class="h2">Title heading 2</div>
    <div class="h3">Title heading 3</div>
    <div class="h4">Title heading 4</div>
    <div class="h5">Title heading 5</div>
  </div>
</Canvas>

## Text sizes
If you need to control font-size only, the following responsive css classes are built:
- `text--3xl` for 3xl
- `text--2xl` for 2xl
- `text--xl` for xl
- `text--lg` for lg
- `text--base` for base
- `text--sm` for sm
- `text--xs` for xs

<Canvas>
  <div>
    <div class="text--3xl">Text size 3xl</div>
    <div class="text--2xl">Text size 2xl</div>
    <div class="text--xl">Text size xl</div>
    <div class="text--lg">Text size lg</div>
    <div class="text--base">Text size base</div>
    <div class="text--sm">Text size sm</div>
    <div class="text--xs">Text size xs</div>
  </div>
</Canvas>

## Styles and Weights
For style variations, the following css classes are built:
- `font--regular` for regular
- `font--italic` for italic
- `font--bold` for bold
- `font--bold-italic`  for bold italic

<Canvas>
  <div>
    <div class="font--regular">Regular</div>
    <div class="font--italic">Italic</div>
    <div class="font--bold">Bold</div>
    <div class="font--bold-italic">Bold italic</div>
  </div>
</Canvas>

## Super and subscripts
use `<sub>` and `<sup>` tags to create superscript and subscript text.

<Canvas>
  <div>
    <p>a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup></p>
  </div>
</Canvas>

<Canvas>
  <div>
    <p>H<sub>2</sub>SO<sub>4</sub> for sulphuric acid.</p>
  </div>
</Canvas>

## Example

As example you can modify the props values in the table below to combine the different classes and see the result:

<ArgsTable story="Example" />

<Canvas>
  <Story
    name="Example"
    args={{
      label: 'Confoederatio helvetica',
      textStyle: 'bold',
      size: '3xl'
    }}
  >
    {Template.bind({})}
  </Story>
</Canvas>


